<template>
  <div class="menu-container scrool-w2 not-scrool">
    <!-- <div style="text-align: center; line-height: 60px; margin-top: 30px">
      <img src="../assets/img/logo.png" alt="" style="width: 70%" />
    </div> -->
    <el-menu
      default-active="/admin/home"
      class="menu"
      :collapse="props.isOpen"
      @open="handleOpen"
      router
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      :unique-opened="false"
      @close="handleClose"
      v-for="item of props.menus"
      :key="item.menuId"
    >
      <el-menu-item>
        <el-icon><ChromeFilled /></el-icon>
        <template #title><h3>后台管理系统</h3></template>
      </el-menu-item>
      <el-menu-item :index="/admin/home">
        <el-icon><House /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item-group title="">
          <el-menu-item index="/admin/user/list">用户列表</el-menu-item>
          <el-menu-item index="/admin/user/vip">会员列表</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Message /></el-icon>
          <span>日志管理</span>
        </template>
        <el-menu-item-group title="">
          <el-menu-item index="#">系统日志</el-menu-item>
          <el-menu-item index="/admin/loginfor">登录日志</el-menu-item>
          <el-menu-item index="#">操作日志</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="/admin/type">
        <el-icon><PieChart /></el-icon>
        <template #title>分类管理</template>
      </el-menu-item>
      <el-sub-menu index="5">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </template>
        <el-menu-item-group title="">
          <el-menu-item index="/admin/pay">支付设置</el-menu-item>
          <el-menu-item index="/admin/common/setting">通用设置</el-menu-item>
          <el-menu-item index="/admin/fast">快捷设置</el-menu-item>
          <el-menu-item index="/admin/notice">系统通知</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><VideoCamera /></el-icon>
          <span>视频管理</span>
        </template>
        <el-menu-item-group title="">
          <el-menu-item index="#">视频列表</el-menu-item>
          <el-menu-item index="#">视频审核</el-menu-item>
          <el-menu-item index="#">广告管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="/admin/order">
        <el-icon><Tickets /></el-icon>
        <template #title>订单管理</template>
      </el-menu-item>
      <el-menu-item index="/admin/shop">
        <el-icon><ShoppingBag /></el-icon>
        <template #title>商品管理</template>
      </el-menu-item>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Monitor /></el-icon>
          <span>权限管理</span>
        </template>
        <el-menu-item-group title="">
          <el-menu-item index="/admin/permissions/role">角色管理</el-menu-item>
          <!-- <el-menu-item index="/admin/permissions">权限设置</el-menu-item> -->
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import {
  Message,
  Setting,
  House,
  User,
  PieChart,
  VideoCamera,
  Tickets,
  ShoppingBag,
  Monitor,
  ChromeFilled,
} from "@element-plus/icons-vue";

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: true,
  },
  menus: {
    type: Array,
    default: () => [],
  },
});

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style scoped lang="scss">
.menu:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu {
  border: none;
  border-right-width: 0;
}
.menu-container {
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #545c64;
  font-size: 14px;
}
</style>
